<template>
  <el-card v-loading="loading" shadow="never" style="border: none">
    <div slot="header">
      <i class="el-icon-ticket" />
      <span>巡查基本信息</span>
    </div>
    <el-row>
      <el-col :span="8">
        <span class="label">任务名称：</span>
        <span class="value">{{ info.name }}</span>
      </el-col>
      <el-col :span="8">
        <span class="label">公司名称：</span>
        <span class="value">{{ info.corpName }}</span>
      </el-col>
      <el-col :span="8">
        <span class="label">创建人：</span>
        <span class="value">{{ info.createBy }}</span>
      </el-col>
    </el-row>

    <el-row class="mt20" style="display: flex; align-items: center">
      <el-col :span="8">
        <span class="label">任务状态：</span>
        <dict-tag
          class="value"
          :options="dict.type.sys_task_status"
          :value="info.status"
        />
      </el-col>
      <el-col :span="8">
        <span class="label">巡查人员：</span>
        <span class="value">{{ info.handlerName }}</span>
      </el-col>
      <el-col :span="8">
        <span class="label">巡查地点：</span>
        <span class="value">{{ info.position }}</span>
      </el-col>
    </el-row>

    <el-row class="mt20">
      <el-col :span="8">
        <span class="label">开始时间：</span>
        <span class="value">{{ parseTime(info.startTime) }}</span>
      </el-col>
      <el-col :span="8">
        <span class="label">结束时间：</span>
        <span class="value">{{ parseTime(info.endTime) }}</span>
      </el-col>
    </el-row>
  </el-card>
</template>
<script>
import { getTask } from '@/api/task/task'

export default {
  name: 'TaskInfoCard',
  dicts: ['sys_task_status'],
  data() {
    return {
      loading: true,
      info: {}
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      this.loading = true
      getTask(this.$route.params.taskId).then(res => {
        this.info = res.data
        this.loading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/variables.scss";

.label {
  color: $text-color-light;
  line-height: 24px;
}
.value {
  display: inline-block;
  color: $label-color;
  line-height: 24px;
}
</style>
